<template lang="pug">
  .login
     .logoWord 系统登录
     .loginBox
       a-form(id="components-form-demo-normal-login" :form="form" class="login-form" @submit="handleSubmit")
         a-form-item
           a-input(v-decorator="['userName',{ rules: [{ required: true, message: '请输入您的用户名!' }] },]" placeholder="Username: admin" class="user-input")
             a-icon(slot="prefix" type="user" style="color: rgba(0,0,0,.25)")
         a-form-item
           a-input-password(v-decorator="['password',{ rules: [{ required: true, message: '请输入您的密码!' }] },]" type="password" placeholder="Password: admin" class="password-input")
             a-icon(slot="prefix" type="lock" style="color: rgba(0,0,0,.25)")
         a-button(type="primary" html-type="submit" class="login-form-button" :disabled="hasErrors(form.getFieldsError())") Log in

</template>

<script lang="ts">
import {Component, Vue} from "vue-property-decorator";

function hasErrors(fieldsError) {
  return Object.keys(fieldsError).some(field => fieldsError[field]);
}

/* eslint-disable */
// eslint-disable-next-line
@Component
export default class Login extends Vue {
  public form;
  public loginMessage = {
    userName: 'admin',
    password: 'admin'
  }

  get hasErrors() {
    return hasErrors;
  }

  beforeCreate() {
    this.form = this.$form.createForm(this, { name: 'normal_login' });
  }

  public handleSubmit(e) {
    e.preventDefault();

    this.form.validateFields((err,values) => {
      if(!err){
        if(values.userName === this.loginMessage.userName && values.password === this.loginMessage.password){
          this.$router.push({path: '/index'});
        }
        else {
          this.$warning({
            title: '用户名或者密码错误',
            content: '请重新输入正确的用户名或者密码',
          });
        }
      }
    });
  }
}
</script>

<style lang="stylus" scoped>
.login{
  display flex
  justify-content center
  align-content center

  width 100%
  height 100%
  background-color #93c6ee
  position absolute
  top 0
  left 0
  bottom 0
  z-index 2
}
.logoWord{
  margin-top 200px
  font-size 30px
  font-weight bold
}
.loginBox{
  border-radius 20px
  position absolute
  top 280px
  width 300px
  height 200px
  background-color white
  display flex
  justify-content center
  align-content center
}

#components-form-demo-normal-login {
  background-color white
  margin-top 16px
}
#components-form-demo-normal-login .login-form {
  max-width 300px;
}
#components-form-demo-normal-login .login-form-forgot {
  float right;
}
#components-form-demo-normal-login .login-form-button {
  width 100%;
}
</style>
